<script setup>
import { ref, defineProps } from "vue";
import { maskIdNumber } from "@/utils/index.js";
import { useRoute } from "vue-router";
import { useActionSheet } from "@/hooks/useNavigation.js";
import clipboard3 from "vue-clipboard3";

const props = defineProps({
  data: Object,
  loading: Boolean,
});
const route = useRoute();

const { toClipboard } = clipboard3();

const type = route.query.type;

const { show, actions, navigationClick, onSelect } = useActionSheet();
</script>

<template>
  <div class="detail">
    <template v-if="!loading && data?.memberCardVoList?.length > 0">
      <div class="header">出行信息</div>
      <div class="detail_card">
        <div class="list" :class="{ border: props.data?.linkPhone }">
          <div class="key">出行人</div>
          <div class="value card_value">
            <div
              class="card_id"
              v-for="item in data?.memberCardVoList"
              :key="item?.id"
            >
              <span> {{ item.name }} 身份证: </span>
              <span class="span-2"> {{ maskIdNumber(item.idCard) }}</span>
            </div>
          </div>
        </div>
        <div class="list" v-if="props.data?.linkPhone">
          <div class="key">联系电话</div>
          <div class="value">{{ props.data?.linkPhone }}</div>
        </div>
      </div>
    </template>
    <van-skeleton v-if="loading">
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <div :style="{ flex: 1 }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
  <div class="detail">
    <template v-if="!loading">
      <template v-if="type === 'hotel' || type === 'hotPot'">
        <div class="header">商家信息</div>
        <div class="detail_card">
          <div class="list_use_time list">
            <div class="key">可用时间：</div>
            <div class="value">商家营业时间内</div>
          </div>
          <div
            class="address_list"
            v-if="props.data?.scenicSpotEntity?.address"
          >
            <div class="left_text">
              {{ props.data.scenicSpotEntity.address }}
            </div>
            <div class="right_icon">
              <div class="right_icon_list" @click="navigationClick">
                <img src="@/assets/images/icons/navigation.png" alt="" />
                <div class="icon_text">导航</div>
              </div>
              <div
                class="line"
                v-if="props.data?.scenicSpotEntity?.telephone"
              />
              <a
                class="right_icon_list"
                v-if="props.data?.scenicSpotEntity?.telephone"
                :href="`tel:+86${props.data?.scenicSpotEntity?.telephone}`"
              >
                <img src="@/assets/images/icons/dial.png" alt="" />
                <div class="icon_text">电话</div>
              </a>
            </div>
          </div>
        </div>
      </template>
      <template v-if="type === 'panda' || type === 'haishua'">
        <div class="header">卡片信息</div>
        <div class="detail_card">
          <div class="list">
            <div class="key">
              {{ props.data?.cardType === 0 ? "激活码" : "到期时间" }}
            </div>
            <div class="value" v-if="props.data?.cardType === 1">
              {{ props.data?.expireTime }}
            </div>
          </div>
          <div class="list copy-code" v-if="props.data?.cardType === 0">
            <p class="value">
              {{ props.data?.activateCode }}
              <!-- <img
                v-if="props.data?.activateCode"
                src="@/assets/images/icons/copy.png"
                width="18"
                alt=""
                @click="
                  async () => {
                    await toClipboard(props.data?.activateCode);
                  }
                "
              /> -->
            </p>
          </div>
        </div>
      </template>
      <template v-if="type === 'hotPot'">
        <div class="header">领取信息</div>
        <div class="detail_card">
          <div class="list">
            <div class="key">领取编号</div>
            <div class="value">{{ props.data?.orderNumber }}</div>
          </div>
          <div class="list" v-if="props.data?.createTime">
            <div class="key">领取时间</div>
            <div class="value">{{ props.data?.createTime }}</div>
          </div>
          <div class="list">
            <div class="key">领取方式</div>
            <div class="value">线上领取</div>
          </div>
        </div>
      </template>
      <template v-else>
        <template v-if="type === 'panda' || type === 'haishua'">
          <div class="header">订单信息</div>
          <div class="detail_card">
            <div class="list">
              <div class="key">订单编号</div>
              <div class="value">{{ props.data?.orderNo }}</div>
            </div>
            <div class="list" v-if="props.data?.payTime">
              <div class="key">支付时间</div>
              <div class="value">{{ props.data?.payTime }}</div>
            </div>
            <div class="list" v-if="props.data?.payWay">
              <div class="key">支付方式</div>
              <div v-if="props.data?.payWay == 0" class="value">网银</div>
              <div v-if="props.data?.payWay == 1" class="value">微信</div>
              <div v-if="props.data?.payWay == 2" class="value">支付宝</div>
            </div>
            <div class="list">
              <div class="key">实付金额</div>
              <div class="value">￥{{ props.data?.orderAmount }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="header">订单信息</div>
          <div class="detail_card">
            <div class="list">
              <div class="key">订单编号</div>
              <div class="value">{{ props.data?.orderNumber }}</div>
            </div>
            <div class="list" v-if="props.data?.payTime">
              <div class="key">支付时间</div>
              <div class="value">{{ props.data?.payTime }}</div>
            </div>
            <div class="list" v-if="props.data?.payWay">
              <div class="key">支付方式</div>
              <div v-if="data?.payWay == 0" class="value">网银</div>
              <div v-if="data?.payWay == 1" class="value">微信</div>
              <div v-if="data?.payWay == 2" class="value">支付宝</div>
            </div>
            <div class="list">
              <div class="key">实付金额</div>
              <div class="value">￥{{ props.data?.actualPrice }}</div>
            </div>
          </div>
        </template>
      </template>
    </template>
    <van-skeleton v-if="loading">
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <div :style="{ flex: 1 }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
            <van-skeleton-paragraph />
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
  <van-action-sheet
    v-model:show="show"
    :actions="actions"
    @select="(e) => onSelect(e, data.scenicSpotEntity)"
    cancel-text="取消"
    close-on-click-action
  />
</template>

<style scoped lang="scss">
:deep(.van-skeleton) {
  padding: 0;
}
:deep(.van-cell) {
  padding: 0;
  background-color: transparent;
}

:deep(.van-collapse-item__content) {
  background-color: transparent;
}

.detail {
  margin-top: 1rem;

  .header {
    font-size: 1.2rem;
    color: #999999;
    line-height: 1.4rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }

  .detail_card {
    background: rgba(79, 172, 145, 0.05);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    .list {
      padding: 0.5rem 0;
      margin: 0 1rem;
      display: flex;
      justify-content: space-between;
      font-size: 1.3rem;
      line-height: 1.8rem;

      .key {
        height: 1.8rem;
        color: #666666;
        white-space: nowrap;
        margin-right: 1.6rem;
      }

      .value {
        color: #333333;
        text-align: right;
        .card_id {
          margin-bottom: 0.5rem;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        span {
          width: 100%;
          flex-wrap: nowrap;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .span-2 {
          flex-wrap: nowrap;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .card_value {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
      }
    }
    .copy-code {
      flex: 1;
      justify-content: center;
      margin-bottom: 2rem;
      align-items: center;
      .value {
        width: 80%;
        white-space: wrap;
        word-break: break-all;
        vertical-align: middle;
        font-weight: bold;
        text-align: left;
      }
    }
    .list_use_time {
      display: flex;
      justify-content: flex-start;
      .key {
        margin-right: 0;
      }
      .value {
        font-size: 1.3rem;
        font-weight: bold;
        color: #333333;
      }
    }
    .address_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      .left_text {
        font-size: 1.3rem;
        font-weight: bold;
        color: #333333;
        line-height: 1.8rem;
      }
      .right_icon {
        display: flex;
        align-items: center;
        margin-left: 1.2rem;
        .right_icon_list {
          .icon_text {
            margin-top: 0.4rem;
            font-size: 1rem;
            color: var(--van-primary-color);
            white-space: nowrap;
          }
        }
        .line {
          margin: 0 1rem;
          width: 0.1rem;
          height: 2.8rem;
          background: rgba(79, 172, 145, 0.2);
        }
      }
    }
    .border {
      border-bottom: 0.1rem solid #eeeeee;
      padding: 0.5rem 0 1rem 0;
    }
  }
}
</style>